<script lang="ts" setup>
import { PrimaryKey } from '@/types';
import { ref } from 'vue';

// typescript
interface IProps {
  /**
   * 是否使用朴素简单样式
   */
  simple?: boolean

  /**
   * 编辑状态
   * -编辑状态下将切换为复选框
   */
  edit?: boolean

  /**
   * 选中项
   */
  value?: PrimaryKey
}

interface IEmits {
  (e: "change", value: PrimaryKey[]): void
}

const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
  simple: false,
  edit: false,
  value: 0
});
const radio = ref([props.value]);

// 选择
const onCheckboxChange = () => {
  emits('change', radio.value);
}
</script>

<!-- 地址列表组件 -->
<template>
  <view class="w-components-container w-address-list" :class="{ simple: simple }">
    <template v-for="(item, itemIndex) in 3" :key="itemIndex">
      <view class="item" :hover-class="simple ? 'hover-class' : 'none'">
        <view class="userinfo" v-if="!simple">
          <text>联&nbsp;&nbsp;系&nbsp;&nbsp;人：张三</text>
          <text>联系电话：18984316437</text>
        </view>
        <view class="address">
          <text>贵州省贵阳市南明区沙冲路XX小区十八栋47楼1号</text>
          <text v-if="simple">
            <uni-icons color="#999" type="right" size="16"></uni-icons>
          </text>
        </view>
        <view class="button-view" v-if="!simple">
          <view class="link-btn link-primary">设为默认</view>
          <view class="link-btn link-delete">移除</view>
        </view>
      </view>
    </template>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-address-list {
  background-color: #fff;

  &.simple {
    .address text {
      color: $text-color;
    }
  }

  .item {
    padding: 20rpx;
    border-bottom: 1px solid $border-color;

    .userinfo {
      display: flex;
      flex-direction: column;

      text {
        font-size: 28rpx;
        color: $text-color;
      }
    }

    .address {
      padding-right: 30rpx;
      display: flex;
      align-items: center;

      text {
        color: #999;
        font-size: 28rpx;

        &:first-child {
          flex: 1;
        }
      }
    }

    .button-view {
      margin-top: 10rpx;

      .link-btn {
        margin-right: 20rpx;
      }
    }
  }
}
</style>